<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-camera">
      <switch-normal v-model="commonAttr.isPostInitialImg" label="截图原始图片" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isPoster" label="使用贴图" @change="onChangeAttr"></switch-normal>
      <template v-if="commonAttr.isPoster">
        <color-normal v-model="commonAttr.cornerColor" label="句柄颜色" format="rgb" @change="onChangeAttr"></color-normal>
        <color-normal v-model="commonAttr.borderColor" label="线条颜色" format="rgb" @change="onChangeAttr"></color-normal>
      </template>
      <color-normal v-model="commonAttr.canvasColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <switch-normal v-model="commonAttr.isPlaceholderImg" label="占位图片" @change="onChangeAttr"></switch-normal>
      <template v-if="commonAttr.isPlaceholderImg">
        <add-img-con :url="commonAttr.placeholderUrl" comAttr="commonAttr" picAttr="placeholderUrl" :isCrop="false" :isDelete="true" :width="250" :height="100" class="margin-left-right-16"></add-img-con>
      </template>
      <div v-else>
        <input-normal label="提示文本" v-model="commonAttr.placeholder" @change="onChangeAttr"></input-normal>
        <slider-normal v-model="commonAttr.placeholderFontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
        <color-normal v-model="commonAttr.placeholderColor" label="颜色" format="rgb" @change="onChangeAttr"></color-normal>
      </div>
      <switch-normal v-model="commonAttr.isShowLoading" label="加载器" @change="onChangeAttr"></switch-normal>
      <color-normal v-model="commonAttr.loadingColor" label="加载器颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <input-normal label="加载器大小" v-model="commonAttr.loadingSize" @change="onChangeAttr"></input-normal>
      <p class="margin-16">初始图片</p>
      <add-img-con :url="commonAttr.initialImage" comAttr="commonAttr" picAttr="initialImage" :isCrop="false" :isDelete="true" :width="250" :height="100" class="margin-left-right-16"></add-img-con>
      <switch-normal v-model="commonAttr.isShowRemoveButton" label="删除按钮" @change="onChangeAttr"></switch-normal>
      <color-normal v-if="commonAttr.isShowRemoveButton" v-model="commonAttr.removeButtonColor" label="删除按钮颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <input-normal  v-if="commonAttr.isShowRemoveButton" label="删除按钮大小" v-model="commonAttr.delButtonSize" @change="onChangeAttr"></input-normal>
      <input-normal label="图片限制大小" v-model="commonAttr.fSizeLimit" @change="onChangeAttr"></input-normal>
      <input-normal label="缩放速度" v-model="commonAttr.zoomSpeed" @change="onChangeAttr"></input-normal>
      <switch-normal v-model="commonAttr.isCutImage" label="裁剪图片" @change="onChangeAttr"></switch-normal>
      <div v-if="commonAttr.isCutImage">
        <input-normal label="裁剪图宽度" v-model="commonAttr.cutImageWidth" @change="onChangeAttr"></input-normal>
        <input-normal label="裁剪框底图地址" v-model="commonAttr.cropFrameUrl" @change="onChangeAttr"></input-normal>
        <input-normal label="裁剪框线地址" v-model="commonAttr.cropFrameLineUrl" @change="onChangeAttr"></input-normal>
      </div>
      <switch-normal v-model="commonAttr.isAutoOpen" label="加载打开相册" @change="onChangeAttr"></switch-normal>
      <input-normal label="图片质量" v-model="commonAttr.quality" @change="onChangeAttr"></input-normal>
      <dropdown-normal label="截图类型" :valLists="SAVE_IMG_DATA_TYPES" v-model="commonAttr.saveImgType" @change="onChangeAttr"></dropdown-normal>
      <input-normal v-if="commonAttr.saveImgType == SAVE_IMG_DATA_TYPES[0].value" v-model="commonAttr.saveImgQuality" label="图片质量" placeholder="0.8"  @change="onChangeAttr"></input-normal>
    </el-form>
  </right-template>
</template>

<script>
import RightTemplate from '@/views/child/right/right-template.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import ColorNormal from '@/views/components/edit/ColorNormal.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import AddImgCon from '@/views/components/add-img-con.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import { editUtils } from '@/views/js/edit-utils'
import { SAVE_IMG_DATA_TYPES } from '@/common/events'

export default {
  name: "RightCamera",
  mixins: [editUtils],
  setup () {
    return {
      SAVE_IMG_DATA_TYPES: SAVE_IMG_DATA_TYPES,
    }
  },
  components: {
    RightTemplate,
    ColorNormal,
    DropdownNormal,
    SliderNormal,
    AddImgCon,
    InputNormal,
    SwitchNormal,
  },
}
</script>